import React from 'react';
import { useParams } from 'react-router-dom';
import { Box, Paper } from '@mui/material';
import PaymentHistoryUserInterface from 'components/ui/PaymentHistoryUserInterface';

/**
 * Payment Detail page component
 * Uses PaymentHistoryUserInterface with actionType="details"
 * Takes invoiceId from URL params
 */
const PaymentDetailPage = () => {
  const { invoiceId } = useParams();
  
  return (
    <Box>
      <Paper elevation={1} sx={{ p: 3 }}>
        <PaymentHistoryUserInterface 
          invoiceId={invoiceId}
          actionType="details"
          initiallyExpanded={false}
        />
      </Paper>
    </Box>
  );
};

export default PaymentDetailPage;